<!-- 首页 手机号登录 -->
<template>
    <view class="login-box">
        <view class="top-slogn-box">
            <text>请输入手机号</text>
        </view>
        <view class="mobile-number">
            <text>+86</text><van-field v-model="state.mobileNumber" placeholder="请输入手机号" />
        </view>
        <van-button type="primary" class="mobile-login-btn" :loading="state.isLoading" @click="loginFn()">下一步</van-button>
    </view>
</template>

<script setup>
import {
    checkCode,// 获取验证码
} from "@/api/login"
import { reactive, getCurrentInstance, onMounted } from "vue"
import { getAuthorization, setAuthorization } from "@/utils/auth.js"

// let socketTask = uni.connectSocket({
//    url:'http://47.107.225.95:4002/Health/Check',
// })

let { proxy } = getCurrentInstance()

const state = reactive({
    mobileNumber: "",
    isLoading:false
})

onMounted(async () => {
})

const loginFn = async () => {
    if(state.mobileNumber.length != 11){
        uni.showToast({
            title:"请输入正确的手机号",
            icon: "none",
        });
        return
    }
    try {
        state.isLoading = true
        let data = await proxy.$get(checkCode + state.mobileNumber + '?codeType=1')
        setAuthorization("codeKey", data.data)
        if (data.code == 200) {
            // 验证更换手机
            uni.navigateTo({
                url: '/pages/login/verificationCode/index?type=4&phoneNumber=' + state.mobileNumber
            })
        }
    } catch (err) {
        state.isLoading = false
        uni.showToast({
            title:err.message,
            icon: "none",
        });
    }
}

</script>

<style lang="scss" scoped>
.login-box {
    position: fixed;
    width: 100%;
    height: 100%;
}

.top-one-click-login-box {
    padding-top: 30rpx;
    display: flex;
    justify-content: space-between;
    font-size: 32rpx;
    color: #262626;
    margin: 0 60rpx;
    font-weight: 600;
    margin-bottom: 120rpx;
}

.mobile-number {
    margin: 220rpx 60rpx 50rpx 60rpx;
    display: flex;
    align-items: center;
    padding-bottom: 30rpx;
    border-bottom: 1px solid #C6C6C6;

    text {
        border-right: 1px solid #C6C6C6;
        padding-right: 36rpx;
        margin-right: 36rpx;
    }

    .van-field {
        padding: 0;
        font-size: 36rpx;

        :deep(.van-field__control) {
            font-size: 36rpx;
        }
    }
}

.top-slogn-box {
    margin-top: 180rpx;
    padding: 0 60rpx;
    font-size: 48rpx;
    text-align: left;
}

.top-logo-box {
    .logo-text {
        text-align: center;
        font-size: 40rpx;
        color: #5C5C5C;
    }

    .top-logo {
        display: flex;
        justify-content: center;
        padding-top: 314rpx;

        img {
            width: 312rpx;
            height: 104rpx;
        }
    }
}

.mobile-login-btn {
    font-size: 40rpx;
    margin-bottom: 10rpx;
    width: calc(100vw - 120rpx);
}
</style>
